<template>
  <a-modal
    :open="visible"
    title="技师设置"
    width="800px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="technician-settings">
      <!-- 左侧技师列表 -->
      <div class="technician-list">
        <div class="list-header">
          <h4>技师列表</h4>
          <div class="list-actions">
            <span class="total-count">总数: {{ technicians.length }}</span>
            <a-button type="primary" @click="printList">打印</a-button>
          </div>
        </div>
        <div class="list-table">
          <a-table
            :columns="columns"
            :data-source="technicians"
            :pagination="false"
            size="small"
            :scroll="{ y: 400 }"
            @row-click="selectTechnician"
          />
        </div>
      </div>

      <!-- 右侧筛选和设置 -->
      <div class="settings-panel">
        <!-- 筛选区域 -->
        <div class="filter-section">
          <h4>筛选</h4>
          <div class="filter-item">
            <label>部门名称:</label>
            <a-select
              v-model:value="filters.department"
              placeholder="请选择部门"
            >
              <a-select-option value="all">全部</a-select-option>
              <a-select-option value="按摩部">按摩部</a-select-option>
              <a-select-option value="美容部">美容部</a-select-option>
              <a-select-option value="SPA部">SPA部</a-select-option>
            </a-select>
          </div>
          <div class="filter-item">
            <label>员工姓名:</label>
            <div class="search-input">
              <a-input
                v-model:value="filters.employeeName"
                placeholder="请输入姓名/编号"
                @keyup.enter="searchEmployee"
              />
              <a-button type="primary" @click="searchEmployee">
                <Search />
              </a-button>
            </div>
          </div>
        </div>

        <!-- 设置区域 -->
        <div class="settings-section">
          <h4>设置</h4>
          <a-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            layout="vertical"
          >
            <a-form-item label="编号" name="id">
              <a-input
                v-model:value="formData.id"
                placeholder="请输入技师编号"
              />
            </a-form-item>
            <a-form-item label="姓名" name="name">
              <a-input
                v-model:value="formData.name"
                placeholder="请输入技师姓名"
              />
            </a-form-item>
            <a-form-item label="性别" name="gender">
              <a-radio-group v-model:value="formData.gender">
                <a-radio value="male">男</a-radio>
                <a-radio value="female">女</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="部门名称" name="department">
              <a-select
                v-model:value="formData.department"
                placeholder="请选择部门"
              >
                <a-select-option value="按摩部">按摩部</a-select-option>
                <a-select-option value="美容部">美容部</a-select-option>
                <a-select-option value="SPA部">SPA部</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="员工卡号" name="employeeCard">
              <a-input
                v-model:value="formData.employeeCard"
                placeholder="请输入员工卡号"
              />
            </a-form-item>
            <a-form-item label="产品分类" name="productType">
              <a-select
                v-model:value="formData.productType"
                placeholder="请选择产品分类"
              >
                <a-select-option value="按摩类">按摩类</a-select-option>
                <a-select-option value="美容类">美容类</a-select-option>
                <a-select-option value="SPA类">SPA类</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="关联项目" name="associatedProjects">
              <a-select
                v-model:value="formData.associatedProjects"
                mode="multiple"
                placeholder="请选择关联项目"
              >
                <a-select-option value="泰式按摩">泰式按摩</a-select-option>
                <a-select-option value="经脉按摩">经脉按摩</a-select-option>
                <a-select-option value="正骨按摩">正骨按摩</a-select-option>
                <a-select-option value="头皮按摩">头皮按摩</a-select-option>
                <a-select-option value="面部护理">面部护理</a-select-option>
                <a-select-option value="身体护理">身体护理</a-select-option>
                <a-select-option value="SPA护理">SPA护理</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <a-button type="primary" @click="saveTechnician">保存</a-button>
          <a-button type="danger" @click="deleteTechnician">删除</a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Search } from '@vben/icons';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';

interface Technician {
  id: string;
  name: string;
  gender: 'male' | 'female';
  department: string;
  employeeCard: string;
  productType: string;
  associatedProjects: string[];
}

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();
const selectedTechnician = ref<Technician | null>(null);

// 筛选条件
const filters = ref({
  department: 'all',
  employeeName: '',
});

// 表单数据
const formData = ref({
  id: '',
  name: '',
  gender: 'male' as 'male' | 'female',
  department: '',
  employeeCard: '',
  productType: '',
  associatedProjects: [] as string[],
});

// 表单验证规则
const rules = {
  id: [{ required: true, message: '请输入技师编号' }],
  name: [{ required: true, message: '请输入技师姓名' }],
  department: [{ required: true, message: '请选择部门' }],
  employeeCard: [{ required: true, message: '请输入员工卡号' }],
  productType: [{ required: true, message: '请选择产品分类' }],
  associatedProjects: [{ required: true, message: '请选择关联项目' }],
};

// 技师数据
const technicians = ref<Technician[]>([
  {
    id: '001',
    name: '王雨然',
    gender: 'female',
    department: '按摩部',
    employeeCard: '21376023602',
    productType: '按摩类',
    associatedProjects: ['泰式按摩', '经脉按摩', '正骨按摩', '头皮按摩'],
  },
  {
    id: '002',
    name: '李小明',
    gender: 'male',
    department: '按摩部',
    employeeCard: '21376023603',
    productType: '按摩类',
    associatedProjects: ['泰式按摩', '经脉按摩'],
  },
  {
    id: '003',
    name: '张美丽',
    gender: 'female',
    department: '美容部',
    employeeCard: '21376023604',
    productType: '美容类',
    associatedProjects: ['面部护理', '身体护理'],
  },
]);

// 表格列定义
const columns = [
  { title: '技师编号', dataIndex: 'id', key: 'id' },
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '性别', dataIndex: 'gender', key: 'gender' },
  { title: '部门名称', dataIndex: 'department', key: 'department' },
  { title: '员工卡号', dataIndex: 'employeeCard', key: 'employeeCard' },
  { title: '产品类型', dataIndex: 'productType', key: 'productType' },
  {
    title: '关联项目',
    dataIndex: 'associatedProjects',
    key: 'associatedProjects',
    customRender: ({ text }: any) => text.join('/'),
  },
];

// 监听选中技师变化
watch(selectedTechnician, (technician) => {
  if (technician) {
    formData.value = {
      id: technician.id,
      name: technician.name,
      gender: technician.gender,
      department: technician.department,
      employeeCard: technician.employeeCard,
      productType: technician.productType,
      associatedProjects: [...technician.associatedProjects],
    };
  } else {
    resetForm();
  }
});

// 方法
const selectTechnician = (record: Technician) => {
  selectedTechnician.value = record;
};

const searchEmployee = () => {
  if (filters.value.employeeName) {
    message.success(`搜索员工: ${filters.value.employeeName}`);
  }
};

const printList = () => {
  message.success('打印技师列表');
};

const saveTechnician = async () => {
  try {
    await formRef.value?.validate();

    if (selectedTechnician.value) {
      // 更新现有技师
      const index = technicians.value.findIndex(
        (t) => t.id === selectedTechnician.value?.id,
      );
      if (index !== -1) {
        technicians.value[index] = { ...formData.value };
        message.success('技师信息更新成功');
      }
    } else {
      // 添加新技师
      technicians.value.push({ ...formData.value });
      message.success('技师添加成功');
    }

    resetForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const deleteTechnician = () => {
  if (selectedTechnician.value) {
    const index = technicians.value.findIndex(
      (t) => t.id === selectedTechnician.value?.id,
    );
    if (index !== -1) {
      technicians.value.splice(index, 1);
      message.success('技师删除成功');
      resetForm();
    }
  } else {
    message.warning('请先选择要删除的技师');
  }
};

const resetForm = () => {
  formData.value = {
    id: '',
    name: '',
    gender: 'male',
    department: '',
    employeeCard: '',
    productType: '',
    associatedProjects: [],
  };
  selectedTechnician.value = null;
};

const handleOk = () => {
  emit('update:visible', false);
};

const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};
</script>

<style scoped>
.technician-settings {
  display: flex;
  gap: 20px;
  height: 600px;
}

.technician-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fafafa;
  border-bottom: 1px solid #d9d9d9;
}

.list-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.list-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.total-count {
  font-size: 12px;
  color: #595959;
}

.list-table {
  flex: 1;
  overflow: hidden;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 300px;
}

.filter-section,
.settings-section {
  padding: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.filter-section h4,
.settings-section h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.filter-item {
  margin-bottom: 12px;
}

.filter-item:last-child {
  margin-bottom: 0;
}

.filter-item label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #595959;
}

.search-input {
  display: flex;
  gap: 4px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background-color: #e6f7ff;
}

:deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
  background-color: #e6f7ff;
}
</style>
